<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 浮动二</title>
    <style>
        div.left{
            float: left;
            width: 100px;
            height: 100px;
            background-color: #7a991a;
            border: dotted 2px #00ff00;
        }
        div.normal{
            width: 100px;
            height: 200px;
            background-color: #8235bd;
            border: dotted 2px #ff0000;
        }

        div.clear{
            clear: both;
        }

        /* 我们设置 三块浮动 元素被阻碍的情况 */
        div.leftEqual{
            width: 40%;
            height: 200px;
            background-color: #cc2200;
            float: left;
            border: groove 4px #000000;
        }

        /*  我们测试三个元素 浮动但是 排列的情况  A 元素的高度分别 大于 B C 的高度 但是 小于 B + C的和 */
        div.rangeOne{
            width: 40%;
            height: 300px;
            background-color: #00ff00;
            float: left;
            border: groove 4px #ffffff;
        }

        div.rangeTwo{
            width: 40%;
            height: 180px;
            background-color: #00ff00;
            float: left;
            border: groove 4px #ffffff;
        }

        div.rangeThree{
            width: 40%;
            height: 180px;
            background-color: #00ff00;
            float: left;
            border: groove 4px #ffffff;
        }

    </style>
</head>
<body>
    <div class="left"></div>
    <div class="left"></div>
    <div class="left"></div>
    <div class="normal"></div>  <!--  实验发现 div.normal 确实是被浮动的元素给遮住了  -->
    <div class="clear"></div>   <!--  使用这个clear 之后 就可以发现下面的的元素出来了 -->
    <div class="normal"></div>
    <div class="leftEqual"></div>  <!--  当浮动的元素太宽时元素会滑动到下面 一行放不下的时候 -->
    <div class="leftEqual"></div>
    <div class="leftEqual"></div>
    <div class="clear"></div> <!-- 清理一下浮动 -->
    <div class="rangeOne"></div>  <!--  我们测试 第三种情形 -->
    <div class="rangeTwo"></div>
    <div class="rangeThree"></div>
    <div class="rangeTwo"></div> <!--  注意第四个div 施工才能够 B + C的 高度和开始的 而不是从 A的 底部开始的-->
</body>
</html>